<template>
	<div class="home">
		<slider :banners="imgs" cname='homeslider' v-if="imgs.length>0"></slider>
		<div class="slider-list">
			<div class="list" v-for="(item,key) in list" :key="key">
				<router-link :to="item.href">
					<img :src="item.src" alt="">
					<h4>{{item.title}}</h4>
				</router-link>
			</div>
		</div>
		<new-user></new-user>
		<panel :title="PanelTitle.jdName" cname="home-jd-panel">
			<div>
				<img :src="PanelTitle.image" alt="">
			</div>
		</panel>
		<panel-lc :lc-list="lcList" :panelTitle="panelLcTitle" ></panel-lc>
		<shopping></shopping>
		<panel :title="PanelTitle.liveTitle" cname="home-live">
			<ul>
				<li v-for="(item, key) in list" :key="key">
					<img :src="item.src" alt="">
					<h4>{{item.title}}</h4>
				</li>
			</ul>
		</panel>
		<v-footer>
			
		</v-footer>
	</div>
</template>

<script>
	let that
	import VFooter from '../footer';
	import Shopping from "./shopping.vue"
	import NewUser from "./new-user.vue"
	import Slider from "../core/slider.vue"
	import Panel from "../core/panel.vue"
	import PanelLc from "../core/lc.vue"
	
	export default {
		components:{
			Slider,
			NewUser,
			Panel,
			PanelLc,
			Shopping,
			VFooter,
		},
		data(){
			return {
				panelLcTitle:"排行榜",
				PanelTitle:{liveTitle:"影视服务",jdName:"TOP NO.1 电影",image:'/img/banner/banner1.jpg'},
				imgs:[],
				lcList:[],
				list:[]
			}
		},
		methods:{
			getImgs(){
				this.$http.get('/api/home.json').then((req)=>{
					that.imgs = req.data.imgs
					that.lcList = req.data.lcList
					that.list = req.data.list
				})
			}
		},
		mounted(){
			that  = this
			this.getImgs()
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/main.scss";
	@import "~@/assets/css/varibles.scss";
	.home{
		
		::v-deep .shopping{
				background-color: $home-elem-bgcolor;
			}
		
		::v-deep .homeslider{
			overflow: hidden;
			width:100%;
			height:0;
			padding-bottom: 20%;
			margin-top: 10px;
			img{
				width:100%;
			}
		}
		.slider-list{
			@include list(row);
			flex-wrap:nowrap;
			justify-content: space-around;
			background-color: #fff;
			padding:20px 0;
			.list{
				a{
					img{
						width:100%;
						display: inline-block;
					}
					h4{
						text-align: center;
						font-size: 20px;
					}
				}
			}
			
		}
		.home-jd-panel{
			>div{
				padding: 30px 20px;
				
				img{
					
					width:100%;
				}
			}
		}
		.home-live{
			ul{
				display: flex;
				padding-bottom: 40px;
				li{
					width:25%;
					img{
						width: 100%;
					}
					h4{
						text-align: center;
						font-size: 20px;
					}
				}
			}
		}
		
	}
	
</style>
